<template>
	<view class="main-container">
	<HeaderBar title="意见反馈" :titleColor="titleColor" :navBarBgc="headerBgc" :isFixed="true"></HeaderBar>
		<!-- 反馈列表 -->	
	<view class="callbackList_content">
		<scroll-view scroll-y v-if="callbackDataList.length"  :showScrollbar="false" class="callbackList-container" @scrolltolower="scrollGetMore">
			 <view class="callbackList-item" v-for="(item,index) in callbackDataList">
			 	<view class="callback-item-top">
			 		<view class="callback-item-top-left">
			 			<text>我的反馈</text>
						<image class="top-left-image" src="http://img.abatour.com/2025-05-04/未命名 -1_4@2x_1746352286322.png" mode=""></image>
			 		</view>
					<text>{{item.createTime}}</text>
			 	</view>
				<view class="callback-item-content" @longpress="copyContent(item.memo)">
					{{item.memo}}
				</view>
			 </view>
			 <wd-loadmore
			     custom-class="loadmore"
			     :state="loading"
			     :loading-props="{color:'#26704e'}"
			 ></wd-loadmore>
			 <wd-gap safe-area-bottom height="40"></wd-gap>
		</scroll-view>
		<view class="nodataStyle" v-else>
							<wd-status-tip image="content" tip="暂无内容" />
						</view>
				
		<view class="add-callback-btn" @click="gotoCallback">
			我要反馈
		</view>
	</view>
	
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getCallbackList
	} from '../../api/fiveMajor'
	import HeaderBar from "@/components/HeaderBar/index.vue";
	const callbackDataList= ref ([])
	const loading = ref("");
	const headerBgc = ref("transparent");
	const titleColor = ref("#2D2D2D");
	const clickLoading = ref(false);
	const gotoCallback = () => {
		uni.navigateTo({
			url:"/fiveMajorSubPack/pages/hospitable/callbackInput"
		})
	};
	/**
	 * 长按复制
	*/
	const copyContent=(content)=>{
		uni.setClipboardData({
			data:content,
			success() {
				uni.showToast({
					title:"复制成功！",
					icon:"none",
				})
			}
		})
	}
	/**
	 * 滚动拿下一页数据
	*/
	const scrollGetMore = (e) => {
		if(loading.value=="loading") return
		if(callbackDataList.value.length==query.pageQuery.total) return
		loading.value="loading"
		getData()
	};
	
	const query=reactive({
		userSuggestion:{},
		pageQuery:{
			pageNo:1,
			pageSize:20,
			total:0,
		}
	})
	/**
	 * 反馈列表
	*/
	const getData=()=>{
		getCallbackList(query).then(res=>{
			if(res.result&&res.result.length){
				callbackDataList.value=[...callbackDataList.value,...res.result]
				query.pageQuery.total=res.total
			}
				loading.value="finished"
		}).catch(err=>{
			loading.value="error"
		})
	}
	onLoad(()=>{
		getData()
	})

</script>

<style lang="scss" scoped>
.nodataStyle{
		width: 100%;
		margin-top: 250rpx;
	}
	.callbackList_content{
		position: relative;
		height: 100vh;
		box-sizing: border-box;
		width: 100%;
		position: flex;
		flex-direction: column;
		padding: 158rpx 28rpx 80rpx;
		overflow: hidden;
		background: linear-gradient(to bottom, #b4cab7 30px, #fff 100px);
		.callbackList-item{
			box-sizing: border-box;
			width:100%;
			border-radius: 10rpx 10rpx 50rpx 50rpx;
			background-color: #2B2B24;
			margin-bottom: 27rpx;
			.callback-item-top{
				color:#EEF0DF;
				font-size: 25rpx;
				padding: 0 27rpx;
				height: 62rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.callback-item-top-left{
					display: flex;
					align-items: center;
					font-weight: bold;
					.top-left-image{
						width: 29rpx;
						height: 34rpx;
						margin-left: 11rpx;
					}
				}
			}
			.callback-item-content{
				box-sizing: border-box;
				padding:31rpx 29rpx;
				width: 100%;
				min-height: 243rpx;
				background-color: #EEEFE7;
				border-radius: 10rpx;
				color:#A7A7A7;
				font-size: 25rpx;
				overflow-wrap: break-word;
				word-break: break-all
			}
		}
		.add-callback-btn{
			position: fixed;
			bottom: 50rpx;
			left: 27rpx;
			width: calc(100% - 54rpx);
			height: 83rpx;
			color:#EEF0DF;
			font-size: 29rpx;
			text-align: center;
			border-radius: 10rpx;
			line-height: 83rpx;
			background-color: #1B9C61;
		}
	}
	.main-container {
		min-height: 100vh;
		background-color: #fff;

		:deep(.swiper-container) {
			margin-top: -100rpx;
			position: relative;
			--wot-swiper-radius: 0;
		}


		.callbackList-container::-webkit-scrollbar {
			  display: none; /* Chrome/Safari */
			}
		.callbackList-container {
			width: 100%;
			height: 100%;
			overflow: scroll;
			-ms-overflow-style: none; /* IE/Edge */
			scrollbar-width: none; /* Firefox */
			margin-top: 41rpx;
		}


		.vlog-container {
			padding: 0 28rpx;
		}
	}
</style>